<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生显示</title>
    <script id="bfwone" data="dep=jquery-3.3.1&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["dream-ui.min", "dream-ui.min"], function() {
                UI.carousel("#carousel");
                UI.checkbox("#checkbox", {
                    data: [{
                        value: 0, text: "天龙八部"
                    },
                        {
                            value: 1, text: "神雕侠侣"
                        },
                        {
                            value: 2, text: "笑傲江湖"
                        },
                        {
                            value: 3, text: "倚天屠龙记"
                        },
                        {
                            value: 4, text: "鹿鼎记"
                        },
                        {
                            value: 5, text: "射雕英雄传"
                        }]
                });
                UI.radio("#radio", {
                    data: [{
                        value: 0, text: "天龙八部"
                    },
                        {
                            value: 1, text: "神雕侠侣"
                        },
                        {
                            value: 2, text: "笑傲江湖"
                        },
                        {
                            value: 3, text: "倚天屠龙记"
                        },
                        {
                            value: 4, text: "鹿鼎记"
                        },
                        {
                            value: 5, text: "射雕英雄传"
                        }]
                });

                UI.collapse("#collapse", {
                    accordion: true
                });
                $("#info").click(function () {
                    UI.dialog.info("Info 对话框", "内容区域");
                })
                $("#success").click(function () {
                    UI.dialog.success("Success 对话框", "内容区域");
                })
                $("#warn").click(function () {
                    UI.dialog.warn("Warn 对话框", "内容区域");
                })
                $("#error").click(function () {
                    UI.dialog.error("Error 对话框", "内容区域");
                })
                UI.loading("#loading", {
                    text: "Loading"
                });
                UI.inputNumber("#inputNumber", {
                    editable: true
                });
                $("#m-info").click(function () {
                    UI.message.info("Info 提醒");
                })
                $("#m-success").click(function () {
                    UI.message.success("Success 提醒");
                })
                $("#m-warn").click(function () {
                    UI.message.warn("Warn 提醒");
                })
                $("#m-error").click(function () {
                    UI.message.error("Error 提醒");
                })
                $("#n-info").click(function () {
                    UI.notice.info("Info 消息");
                })
                $("#n-success").click(function () {
                    UI.notice.success("Success 消息");
                })
                $("#n-warn").click(function () {
                    UI.notice.warn("Warn 消息");
                })
                $("#n-error").click(function () {
                    UI.notice.error("Error 消息");
                })
                UI.select("#select", {
                    data: [{
                        value: 0, text: "飞狐外传"
                    },
                        {
                            value: 1, text: "雪山飞狐"
                        },
                        {
                            value: 2, text: "连城诀"
                        },
                        {
                            value: 3, text: "天龙八部"
                        },
                        {
                            value: 4, text: "射雕英雄传"
                        },
                        {
                            value: 5, text: "白马啸西风"
                        },
                        {
                            value: 6, text: "鹿鼎记"
                        },
                        {
                            value: 7, text: "笑傲江湖"
                        },
                        {
                            value: 8, text: "书剑恩仇录"
                        },
                        {
                            value: 9, text: "神雕侠侣"
                        },
                        {
                            value: 10, text: "侠客行"
                        },
                        {
                            value: 11, text: "倚天屠龙记"
                        },
                        {
                            value: 12, text: "碧血剑"
                        },
                        {
                            value: 13, text: "鸳鸯刀"
                        },
                        {
                            value: 14, text: "越女剑"
                        }]
                });
                UI.table("#table", {
                    data: {
                        thead: [{
                            label: "name", title: "姓名"
                        },
                            {
                                label: "age", title: "年龄", sort: true
                            },
                            {
                                label: "job", title: "工作"
                            },
                            {
                                label: "date", title: "日期", sort: true
                            }],
                        tbody: [{
                            name: "张三", age: "60", job: "教师", date: "1962-05-05"
                        },
                            {
                                name: "李四", age: "50", job: "医生", date: "1970-07-05"
                            },
                            {
                                name: "王五", age: "20", job: "作家", date: "1982-03-05"
                            },
                            {
                                name: "赵六", age: "40", job: "警察", date: "1959-02-05"
                            },
                            {
                                name: "孙七", age: "30", job: "法官", date: "1968-09-05"
                            }]
                    }
                });

                UI.tabs("#tab", {
                    theme: "card"
                });
                UI.switch1("#switch", {
                    showText: true
                });
                UI.page("#page", {
                    total: 1500,
                    pageSize: 10,
                    simple: false
                });
            });
        });
    </script>
 <style>
        h1 {
            font-size: 30px;
           
            text-transform: uppercase;
            font-weight: 300;
            text-align: center;
            margin-bottom: 15px;
        }
        table {
            width: 100%;
            table-layout: fixed;
        }
        .tbl-header {
            background-color: rgba(255,255,255,0.3);
        }
        .tbl-content {
            height: 300px;
            overflow-x: auto;
            margin-top: 0px;
            border: 1px solid rgba(255,255,255,0.3);
        }
        th {
            padding: 20px 15px;
            text-align: left;
            font-weight: 500;
            font-size: 12px;
            
            text-transform: uppercase;
        }
        td {
            padding: 15px;
            text-align: left;
            vertical-align: middle;
            font-weight: 300;
            font-size: 12px;
            
            border-bottom: solid 1px rgba(255,255,255,0.1);
        }

    </style>


<style type="text/css">
 .contrainer{
   width:800px;
   margin:20px auto
 }
 h3{
    text-align:center;
  }
table{
    width:100%; 
    border-collapse:collapse;
  }
  td,th{
    padding:8px 15px;
    text-align:center;
  }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function bjChange(bjId){
	if(bjId==0){
		$('#myTable').empty();
	}else{
		$('#myTable').load('stu?method=table&id='+bjId);
	}	
}
function add(){
	window.location="stu?method=add&bjId="+$('#bj').val();
}

function del(id){
	if(confirm('是否要删除这条记录？')){
		window.location="stu?method=delete&id="+id;
	}
}

</script>

<style type="text/css">
.top {
	width: 300px;
}
.top table {
	width:60%;
}
td,th {
	padding: 6px 15px;
	text-align: center;
}
</style>
</head>
<body background="images/1.jpg" >
	<p>
	<h3>查看班级学生</h3>
		<label>班级：</label>
		<select id="bj" onchange="bjChange(this.value)">
			<option value="0">--请选择--</option>
			<c:forEach items="${bjs}" var="bj">
				<option value="${bj.id}" ${bj.id==bjId?"selected=selected":""}>${bj.name}</option> 
			</c:forEach>
		</select>
		<button type="button" onclick="add()">新增</button>


	<div id="myTable">
		<c:if test="${bjId!=null}">
			
			<table border="1">
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>密码</th>
					<th colspan="2">操作</th>
				</tr>
				<c:forEach items="${stu}" var="s">
					<tr>
						<td>${s.stuNo}</td>
						<td>${s.name}</td>
						<td>${s.password}</td>
						<td><a href="stu?method=update&id=${s.id}">修改</a></td>
						<td><a href="javascript:del(${s.id})">删除</a></td>
					</tr>
				</c:forEach>
			</table>
		</c:if>
	</div>
	

<a href="main.jsp">返回首页</a>
</body>
</html>